<template>
	<view>
		<!-- 提示框 -->
		<view>
			<u-toast ref="uToast" />
		</view>
		
		<view class="home-top" @click="toLogin">
			<image :src="iamgePath('/other/user.png')" class="user-image"></image>
			<text class="user-name">{{ getUsername }}</text>
			<image :src="iamgePath('/other/more.png')" class="user-more"></image>
		</view>
		
		<view class="home-item">
			<home-item v-for="(i, index) in list"
				:key="index"	
				:name="i.name"
				:image="i.imagePath"
				@click.native="toPage(i.toPath)">
			</home-item>
		</view>
				
		<view class="domain" v-if="isLogin">
			<view class="changeUser" @click="changeUser">切换用户</view>
			<view class="logout" @click="logout">退出用户</view>
		</view>
	</view>
</template>

<script>
	import homeItem from './components/home-item/home-item.vue'
	import { mapState, mapGetters, mapMutations } from 'vuex'
	
	export default {     
		components: {homeItem},
		data() {
			return {
				list: [
					new MenuList('购物车', '/home/1.png'),
					new MenuList('收藏', '/home/2.png', '/pages/love/love'),
					new MenuList('客服', '/home/3.png', '/pages/custom-service/custom-service'),
					new MenuList('创意/反馈', '/home/4.png'),
					new MenuList('评分', '/home/5.png'),
				]
			}
		},
		computed: {
			...mapState('user', ['username']),
			...mapGetters('user', ['isLogin']),
			getUsername() {
				return this.isLogin ? this.username : '立即登录'
			}
		},
		methods: {
			...mapMutations('user', ['setUserId', 'setUsername']),
			iamgePath(path) {
				return this.$myRequire(path)
			},
			// 跳转页面
			toPage(path) {
				uni.navigateTo({
					url: path
				})
			},
			// 跳转到登录页面
			toLogin() {
				if(!this.isLogin) {
					this.toPage('/pages/login/login')
				}	
			},
			showToast(_title, _type, _url) {
				this.$refs.uToast.show({
					title: _title,
					type: _type,
					url: _url,
					duration: 1000
				})
			},
			changeUser() {
				this.logout()
				
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},
			logout() {
				const that = this
				
				uni.removeStorage({
					key: 'user',
					success(res) {
						that.setUserId('')
						that.setUsername('')
						that.showToast('退出成功', 'success')
					}
				});
			},
		}
	}
	
	// 功能菜单class
	class MenuList{
		/**
		 * @param {Object} name 功能名
		 * @param {Object} imagePath 图标路径
		 * @param {Object} toPath 点击跳转的页面路径
		 */
		constructor(name, imagePath, toPath) {
		    this.name = name
			this.imagePath = imagePath
			this.toPath = toPath
		}
	}
</script>

<style>
	.home-top{
		background-color: #fff;
		height: 200rpx;
		width: 100%;
		border-radius: 0 0 7px 7px;
		padding: 30rpx;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
	}
	
	.user-image{
		width: 80rpx;
		height: 80rpx;
		vertical-align: middle;
		background-color: #e4e4e4;
		border-radius: 7px;
	}
	
	.user-name{
		font-size: 20px;
		font-weight: 600;
		margin-left: 20rpx;
		text-overflow: ellipsis;
		overflow: hidden;
		width: 500rpx;
	}
	
	.user-more{
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 30rpx;
	}
	
	.home-item{
		margin-top: 50rpx;
		
	}
	
	.domain{
		margin-top: 50rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.domain view{
		width: 92%;
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 7px;
		font-size: 17px;
	}
	
	.changeUser{
		background-color: #00B386;
		color: #FFFFFF;
	}
	
	.logout{
		margin-top: 5rpx;
		background-color: #d3d3d3;
	}
</style>